<template>
  <div>
    <el-button
      type="primary"
      size="small"
      style="margin: 15px 0 15px 30px"
      @click="addon"
      >新增</el-button
    >
    <!-- 表格 -->
    <el-table :data="list" border style="width: 95%; margin: auto">
      <el-table-column fixed type="index" prop="name" label="#" width="50">
      </el-table-column>
      <el-table-column prop="title" label="题目" width="500"> </el-table-column>
      <el-table-column
        prop="cid"
        :formatter="(row) => classifyMap[row.cid]"
        label="分类"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="uid" label="作者" width="140"> </el-table-column>
      <el-table-column prop="created" label="发布时间" width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="updataClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="deleteClick(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="50%"
    >
      <div style="padding: 15px">
        <el-page-header @back="goBack" title="返回"> </el-page-header>
      </div>

      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="题目">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option
              v-for="(val, key) in classifyMap"
              :key="key"
              :label="val"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.answers">
            <div
              class="el-checkbox-row"
              v-for="(item, index) in form.options"
              :key="index"
            >
              <el-checkbox :label="getLetter(index)"></el-checkbox>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="item.value"
              >
              </el-input>
              <el-button
                v-if="index == form.options.length - 1"
                type="primary"
                icon="el-icon-plus"
                @click="jiaClick"
                circle
              ></el-button>
              <el-button
                v-if="index > 3"
                type="danger"
                icon="el-icon-minus"
                @click="jianClick(index)"
                circle
              ></el-button>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案">
          <div>{{ doSort(form.answers).join(",") }}</div>
        </el-form-item>
        <el-form-item label="答案提示">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.tips"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="addClick(form)"
            >立即创建</el-button
          >
          <el-button size="small" @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      drawer: false,
      form: {
        answers: [],
        options: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }],
      },
    };
  },
  mounted() {
    this.getQuestions();
    this.$store.dispatch("classify/getClassify");
  },
  computed: {
    ...mapState("test", ["list"]),
    ...mapGetters("classify", ["classifyMap"]),
  },
  methods: {
    ...mapActions("test", [
      "getQuestions",
      "deleteQuestions",
      "addQuestions",
      "updateQuestions",
    ]),
    //答案
    doSort(arr) {
      return [...arr].sort();
    },
    //A-Z
    getLetter(index) {
      return String.fromCharCode("A".charCodeAt() + index);
    },
    //选项按钮加
    jiaClick() {
      this.form.options.push({ value: "" });
    },
    //选项按钮减
    jianClick(index) {
      this.form.options.splice(index, 1);
      let form = this.form;
      form.answers.forEach((answer) => {
        var isTure = false;
        form.options.forEach((option) => {
          if (answer == option.text) {
            isTure = true;
          }
        });
        if (!isTure) {
          form.answers.splice(form.answers.indexOf(answer), 1);
        }
      });
    },
    //新增
    addon() {
      this.drawer = true;
      this.form = {
        answers: [],
        options: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }],
      };
    },
    //立即创建
    async addClick() {
      if (this.form.id) {
        await this.updateQuestions(this.form);
      } else {
        await this.addQuestions(this.form);
      }
      this.drawer = false;
    },
    //删除
    deleteClick(id) {
      this.$confirm("此操作将永久删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.deleteQuestions({ id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    updataClick(row) {
      this.drawer = true;
      this.form = {
        ...row,
        answers: row.answers.split(","),
        options: JSON.parse(row.options),
      };
    },
    //返回
    goBack() {
      this.drawer = false;
    },
    //取消
    quxiao() {
      this.drawer = false;
    },
  },
};
</script>

<style scoped>
.el-checkbox-row {
  display: flex;
}

.el-checkbox-row .el-textarea {
  margin-left: 10px;
  width: 50%;
}
</style>